<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="bootstrap/bootstrap.css" rel="stylesheet">
    <script src="jquery/jquery.js"></script>
    <script src="bootstrap/bootstrap.js"></script>

    <link href="dist/summernote.css" rel="stylesheet">
    <script src="dist/summernote.js"></script>
    <script src="dist/lang/summernote-zh-CN.js"></script>

    <script src='editor.js'></script>

    <script>
        $(document).ready(function() {
            initSummernote();
        });



    </script>
</head>
<style>
    .note-editor.note-frame {
        border: 0px solid;
    }
    <!--.panel {-->
        <!--margin-bottom: 0px;-->
        <!--border: 0px solid;-->
        <!--border-radius: 0px;-->
        <!--box-shadow: 0px 0px 0px #FFFFFF;-->
    <!--}-->
    <!--.note-editor.note-frame .note-editing-area .note-codable {-->
        <!--background-color: #FFFFFF;-->
        <!--color: #2F2F2F;-->
        <!--outline: none;-->
    <!--}-->
    <!--.note-editor.note-frame .note-editing-area .note-editable[contenteditable="false"] {-->
        <!--background-color: #FFFFFF;-->
    <!--}-->
    .m{ width: 100%; margin-left: auto; margin-right: auto; height:300px; }
    .bottom-line{
        border: none;
        border-bottom: 1px dashed #e5e5e5;
        width:100%;
        padding-left: .6em;
        font-size: 1.3em;
        outline:none;
    }

    .article-title{
        width:100%;
        min-height:40px;
        line-height: 40px;
        padding: 2px 12px;
     }
    .article-title:empty::before{
       color:#b8b8b8;
       content:attr(placeholder);
     }


</style>
<body>

<div id="articleTitle"  class="article-title bottom-line" contenteditable="true" placeholder="请输入标题(5-30个字)"></div>
<div id="summernote" contenteditable="true"></div>

</body>
</html>